import { Boot } from '@wangeditor/editor'
import { SlateEditor, SlateElement, SlateTransforms } from '@wangeditor/editor'
import { Message } from 'element-ui'
export class ParagraphSpacingBefore {
  constructor() {
    this.title = '段落前间距'
    this.tag = 'select'
    this.width = 120
    this.defineTitle = {
      value: 'title',
      text: '插入字段',
      styleForRenderMenuList: { display: 'none' },
    }
  }

  // 下拉框的选项
  getOptions(editor) {
    const options = [
      { value: '0px', text: '段前间距0px' },
      { value: '5px', text: '段前间距5px' },
      { value: '10px', text: '段前间距10px' },
      { value: '15px', text: '段前间距15px' },
      { value: '20px', text: '段前间距20px' },
    ]
    return options
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return true
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    const nodeEntries = SlateEditor.nodes(editor, {
      match: (node) => {
        if (SlateElement.isElement(node)) {
          if (node.type === 'paragraph') {
            return true // 匹配 paragraph
          }
        }
        return false
      },
      universal: true,
    })
    const selectedNodes = []
    if (nodeEntries == null) {
      Message.error('未选中段落！')
    } else {
      for (let nodeEntry of nodeEntries) {
        const [node, path] = nodeEntry
        selectedNodes.push(node)
      }
    }
    if (selectedNodes.length === 0) {
      return '15px' // 默认选中的值
    } else {
      const elem = editor.toDOMNode(selectedNodes[0])
      if (!elem.style.marginTop) {
        return '15px' // 默认选中的值
      } else {
        return elem.style.marginTop
      }
    }
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    console.log(editor, 'editor')

    const nodeEntries = SlateEditor.nodes(editor, {
      match: (node) => {
        if (SlateElement.isElement(node)) {
          if (node.type === 'paragraph') {
            return true // 匹配 paragraph
          }
        }
        return false
      },
      universal: true,
    })
    const selectedNodes = []
    if (nodeEntries == null) {
      Message.error('未选中段落！')
    } else {
      for (let nodeEntry of nodeEntries) {
        const [node, path] = nodeEntry
        selectedNodes.push(node)
      }
    }
    selectedNodes.forEach((node) => {
      const elem = editor.toDOMNode(node)
      elem.style.marginTop = value
      elem.style.overflow = 'hidden'
    })
  }
}
export class ParagraphSpacingAfter {
  constructor() {
    this.title = '段落后间距'
    this.tag = 'select'
    this.width = 120
  }

  // 下拉框的选项
  getOptions(editor) {
    const options = [
      { value: '0px', text: '段后间距0px' },
      { value: '5px', text: '段后间距5px' },
      { value: '10px', text: '段后间距10px' },
      { value: '15px', text: '段后间距15px' },
      { value: '20px', text: '段后间距20px' },
    ]
    return options
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return true
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    const nodeEntries = SlateEditor.nodes(editor, {
      match: (node) => {
        if (SlateElement.isElement(node)) {
          if (node.type === 'paragraph') {
            return true // 匹配 paragraph
          }
        }
        return false
      },
      universal: true,
    })
    const selectedNodes = []
    if (nodeEntries == null) {
      Message.error('未选中段落！')
    } else {
      for (let nodeEntry of nodeEntries) {
        const [node, path] = nodeEntry
        selectedNodes.push(node)
      }
    }
    if (selectedNodes.length === 0) {
      return '15px' // 默认选中的值
    } else {
      const elem = editor.toDOMNode(selectedNodes[0])
      console.log(elem.style)
      if (!elem.style.marginBottom) {
        return '15px' // 默认选中的值
      } else {
        return elem.style.marginBottom
      }
    }
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    console.log(editor, 'editor')

    const nodeEntries = SlateEditor.nodes(editor, {
      match: (node) => {
        if (SlateElement.isElement(node)) {
          if (node.type === 'paragraph') {
            return true // 匹配 paragraph
          }
        }
        return false
      },
      universal: true,
    })
    const selectedNodes = []
    if (nodeEntries == null) {
      Message.error('未选中段落！')
    } else {
      for (let nodeEntry of nodeEntries) {
        const [node, path] = nodeEntry
        selectedNodes.push(node)
      }
    }
    console.log(selectedNodes, 'selectedNodes')

    selectedNodes.forEach((node) => {
      const elem = editor.toDOMNode(node)
      elem.style.marginBottom = value
      elem.style.overflow = 'hidden'
    })
  }
}

const menu1Conf = {
  key: 'ParagraphSpacingBefore', // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new ParagraphSpacingBefore() // 把 `YourMenuClass` 替换为你菜单的 class
  },
}
const menu2Conf = {
  key: 'ParagraphSpacingAfter', // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new ParagraphSpacingAfter() // 把 `YourMenuClass` 替换为你菜单的 class
  },
}
Boot.registerMenu(menu1Conf)
Boot.registerMenu(menu2Conf)
